<template>
  <view class="list-container" :style="{ height: listHeight }">
    <scroll-view 
      scroll-y 
      class="todo-list"
      :enable-flex="true"
      :scroll-anchoring="true"
      :enhanced="true"
      :bounces="true"
      :show-scrollbar="true"
      :scroll-with-animation="true"
      :fast-deceleration="false"
    >
      <view class="list-content">
        <view class="empty-tip" v-if="!todos.length">
          <uni-icons type="info" size="64" color="#CCCCCC"></uni-icons>
          <text class="empty-text">还没有添加任何清单哦</text>
        </view>
        <view 
          v-else 
          v-for="(todo, index) in sortedTodos" 
          :key="todo.id" 
          class="todo-item"
          :class="{
            'todo-item-enter': todo.isNew,
            'todo-item-edit': todo.isEditing
          }"
          @touchstart="handleTouchStart" 
          @touchend="handleTouchEnd" 
          @touchmove="handleTouchMove"
        >
          <view class="todo-content">
            <view 
              class="dot" 
              :class="{ 'dot-completed': todo.completed }"
              @tap.stop="toggleTodo(todo.id)"
            ></view>
            <view class="text-container" @tap.stop="toggleTodo(todo.id)">
              <text class="todo-text" :class="{ completed: todo.completed }">{{ todo.text }}</text>
            </view>
          </view>
          <view class="todo-actions">
            <view class="todo-actions-left">
              <text class="priority" :class="'p' + todo.priority">{{ getPriorityText(todo.priority) }}</text>
            </view>
            <view class="todo-actions-right">
              <button class="action-btn" @click="handleEdit(todo.id, todo)">编辑</button>
              <button class="action-btn delete-btn" @click="handleDelete(todo.id)">删除</button>
            </view>
          </view>
        </view>
        <view class="safe-bottom"></view>
      </view>
    </scroll-view>
    
    <ConfirmModal
      ref="confirmModal"
      :content="confirmContent"
      @confirm="confirmAction"
      @cancel="cancelAction"
    />

    <uni-popup ref="functionPopup" type="bottom">
      <view class="add-todo-container">
        <view class="popup-header">
          <text class="cancel-btn" @tap="hideFunctionMenu">取消</text>
          <text class="popup-title">功能面板</text>
          <text class="confirm-btn" @tap="hideFunctionMenu">确定</text>
        </view>
        <view class="menu-options">
          <view class="menu-group">
            <view class="group-title">排序方式</view>
            <view class="menu-option" @tap="handleSort('priority')">
              <view class="option-left">
                <uni-icons type="star-filled" size="20" color="#FF9800"></uni-icons>
                <text>优先级排序</text>
              </view>
              <uni-icons v-if="sortType === 'priority'" type="checkmarkempty" size="20" color="#6E8CD5"></uni-icons>
            </view>
            <view class="menu-option" @tap="handleSort('completed')">
              <view class="option-left">
                <uni-icons type="checkbox-filled" size="20" color="#6E8CD5"></uni-icons>
                <text>完成状态排序</text>
              </view>
              <uni-icons v-if="sortType === 'completed'" type="checkmarkempty" size="20" color="#6E8CD5"></uni-icons>
            </view>
          </view>
          
          <view class="menu-group">
            <view class="menu-option warning" @tap="clearCompleted">
              <view class="option-left">
                <uni-icons type="trash-filled" size="20" color="#F56C6C"></uni-icons>
                <text>清除已完成</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import ConfirmModal from './ConfirmModal.vue'

export default {
  name: 'TodoList',
  components: {
    ConfirmModal
  },
  props: {
    todos: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      deleteId: null,
      statusBarHeight: 0,  // 添加状态栏高度变量
      screenHeight: 0,      // 添加屏幕高度变量
      confirmContent: '',  // 确认框内容
      confirmType: '',    // 确认类型：delete/clearCompleted
      sortType: '',    // 排序类型：priority/completed
      touchStartTime: 0,
      touchStartY: 0,
      longPressTimer: null,
      isScrolling: false
    }
  },
  mounted() {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    this.screenHeight = systemInfo.windowHeight;
  },
  computed: {
    listHeight() {
      // 修改列表高度计算
      // 屏幕高度 - 状态栏高度 - 头部高度(230rpx) - 底部导航(100rpx + 安全区域)
      const headerHeight = 140; // 增加头部高度
      const tabBarHeight = 100;
      const safeAreaBottom = 34; // 添加底部安全区域高度
      return `${this.screenHeight - this.statusBarHeight - uni.upx2px(headerHeight + tabBarHeight + safeAreaBottom)}px`;
    },
    sortedTodos() {
      if (!this.todos.length) return []
      
      const sorted = [...this.todos]
      
      switch(this.sortType) {
        case 'priority':
          sorted.sort((a, b) => b.priority - a.priority)  // 优先级高的排前面
          break
          
        case 'completed':
          sorted.sort((a, b) => {
            // 未完成的排在前面，已完成的排在后面
            if (a.completed === b.completed) {
              // 如果完成状态相同，按优先级排序
              return b.priority - a.priority
            }
            return a.completed ? 1 : -1
          })
          break
      }
      
      return sorted
    }
  },
  methods: {
    toggleTodo(id) {
      this.$emit('toggle', id);
    },
    getPriorityText(priority) {
      const texts = ['普通', '重要', '紧急'];
      return texts[priority];
    },
    handleDelete(id) {
      this.deleteId = id;
      this.confirmContent = '确定要删除这条待办吗？';
      this.confirmType = 'delete';
      this.$refs.confirmModal.show();
    },
    confirmAction() {
      if (this.confirmType === 'delete') {
        this.$emit('delete', this.deleteId);
        this.deleteId = null;
      } else if (this.confirmType === 'clearCompleted') {
        this.$emit('clearCompleted');
        this.hideFunctionMenu();
      }
      this.confirmType = '';
    },
    cancelAction() {
      if (this.confirmType === 'delete') {
        this.deleteId = null;
      }
      this.confirmType = '';
    },
    handleEdit(id, todo) {
      todo.isEditing = true
      this.$emit('edit', { id, todo })
      setTimeout(() => {
        todo.isEditing = false
      }, 500)
    },
    handleSort(type) {
      this.$emit('sort', type)
      this.hideFunctionMenu()
    },
    hideFunctionMenu() {
      this.$refs.functionPopup.close()
    },
    handleTouchStart(e) {
      this.touchStartTime = Date.now()
      this.touchStartY = e.touches[0].clientY
    },
    
    handleTouchMove(e) {
      const moveY = Math.abs(e.touches[0].clientY - this.touchStartY)
      if (moveY > 10) { // 10px的移动阈值
        this.isScrolling = true
      }
    },
    
    handleTouchEnd() {
      this.isScrolling = false
    },

    handleAdd(todo) {
      todo.isNew = true
      this.$emit('add', todo)
      setTimeout(() => {
        todo.isNew = false
      }, 500)
    },

    handleAdd(todo) {
      todo.isNew = true
      this.$emit('add', todo)
      setTimeout(() => {
        todo.isNew = false
      }, 500)
    }
  }
}
</script>

<style>
.list-container {
  position: relative;
  width: 100%;
}

.todo-list {
  height: 100%;
}

.list-content {
  padding: 10rpx 4rpx 0;
}

.safe-bottom {
  height: 180rpx; /* 增加底部安全区域的高度 */
  width: 100%;
}

.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.empty-text {
  color: #999;
  font-size: 28rpx;
  margin-top: 20rpx;
  text-align: center;
}

.todo-item {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 28rpx 30rpx;
  margin-bottom: 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(110, 140, 213, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transform-origin: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  transform: translateY(0) scale(1);
}

.todo-item-enter {
  animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.todo-item-edit {
  animation: pulse 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.todo-content {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  position: relative;
}

.dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  border: 3rpx solid var(--primary);
  margin-right: 20rpx;
  transition: all 0.3s ease;
  cursor: pointer;
  flex-shrink: 0;
}

.dot-completed {
  background: var(--primary);
  position: relative;
}

.text-container {
  position: relative;
  display: inline-block;
  max-width: calc(100% - 44rpx);
}

.todo-text {
  font-size: 33rpx;
  color: #333;
  flex: 1;
  word-break: break-all;
  transition: all 0.3s;
}

.todo-text.completed {
  color: #999;
  text-decoration: line-through;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 2rpx;
  opacity: 0.6;
}

.todo-text.completed::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 3rpx;
  background-color: var(--primary);
  transform-origin: left;
  animation: strikeThrough 0.3s ease-out forwards;
}

.todo-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.todo-actions-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.todo-actions-right {
  display: flex;
  align-items: center;
}

.priority {
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  margin-right: 20rpx;
  font-size: 24rpx;
}

.p0 {
  background: rgba(158, 158, 158, 0.1);
  color: #757575;
}

.p1 {
  background: rgba(255, 152, 0, 0.1);
  color: #FF9800;
}

.p2 {
  background: rgba(244, 67, 54, 0.1);
  color: #F44336;
}

.time {
  color: #6E8CD5;
  font-size: 24rpx;
  display: flex;
  align-items: center;
}

.time::before {
  content: '';
  display: inline-block;
  width: 24rpx;
  height: 24rpx;
  background: url() no-repeat center;
  background-size: contain;
  margin-right: 8rpx;
}

.action-btn {
  font-size: 24rpx;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  margin-left: 16rpx;
  border: none;
  transition: all 0.3s ease;
}

/* 编辑按钮样式 */
.action-btn:not(.delete-btn) {
  background: rgba(110, 140, 213, 0.1);
  color: #6E8CD5;
}

/* 删除按钮样式 */
.action-btn.delete-btn {
  background: rgba(245, 108, 108, 0.1);
  color: #F56C6C;
}

.action-btn:active {
  opacity: 0.8;
}

@keyframes strikeThrough {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

.priority-popup {
  background: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  padding: 30rpx;
}

.priority-title {
  text-align: center;
  font-size: 32rpx;
  color: #333;
  margin-bottom: 30rpx;
}

.priority-options {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30rpx;
}

.priority-option {
  padding: 20rpx 40rpx;
  border-radius: 30rpx;
  background: #F5F7FA;
  color: #666;
}

.priority-cancel {
  text-align: center;
  padding: 20rpx;
  color: #999;
  border-top: 1rpx solid #EEEEEE;
}

.todo-list.has-batch-bar {
  padding-bottom: 150rpx;
}

.todo-content.select-mode {
  margin-left: 20rpx;
}

.empty-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.add-todo-container {
  background: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #eee;
}

.popup-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.cancel-btn, .confirm-btn {
  font-size: 32rpx;
  padding: 12rpx;
}

.cancel-btn {
  color: #666;
}

.confirm-btn {
  color: #6E8CD5;
  font-weight: 500;
}

.menu-options {
  padding: 32rpx;
}

.menu-group {
  margin-bottom: 24rpx;
}

.group-title {
  font-size: 24rpx;
  color: #999;
  padding: 16rpx 24rpx 8rpx;
}

.menu-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  font-size: 28rpx;
  color: #666;
  background: #FFFFFF;
}

.option-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.menu-option:active {
  background: #F5F7FA;
}

.menu-option.warning {
  color: #F56C6C;
}

@supports (padding-bottom: constant(safe-area-inset-bottom)) {
  .batch-bar {
    bottom: calc(30rpx + constant(safe-area-inset-bottom));
  }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .batch-bar {
    bottom: calc(30rpx + env(safe-area-inset-bottom));
  }
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  60% {
    opacity: 0.8;
    transform: translateY(5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
</style> 